<template>
    <el-container id="app"
                  v-if="token">
        <el-header class="app-header">
            <el-select class="app-header-title"
                       :value="curTeam ? curTeam.company_id : ''"
                       @change="toggleTeam">
                <el-option v-for="item in teams"
                           :key="item.company_id"
                           :label="item.name"
                           :value="item.company_id">
                </el-option>
            </el-select>
            <el-menu :default-active="curModule"
                     mode="horizontal"
                     @select="selectModule">
                <el-menu-item v-for="(item, i) in list"
                              :key="i"
                              :index="item.name">{{item.label}}</el-menu-item>
            </el-menu>
            <div class="app-action">
                <a>上级</a>
            </div>
        </el-header>
        <router-view></router-view>
        <panel></panel>
        <printOrder></printOrder>
        <errorInfo info="您当前还没任何企业，请去 OA 里创建一个！"
                   v-if="!curTeam"></errorInfo>
    </el-container>
    <router-view v-else></router-view>
</template>
<script>
import panel from '@/component/panel'
import printOrder from './view/printOrder'
import errorInfo from '@/component/global/error'

export default {
    name: 'App',
    components: {
        panel, printOrder, errorInfo
    },
    data() {
        return {
            list: [{
                name: 'bizOrder',
                label: '业务接单'
            }, {
                name: 'bizAudit',
                label: '业务单审核'
            }],
            curModule: 'bizOrder'
        }
    },
    computed: {
        errInfo() {
            return this.$store.state.errInfo
        },
        teams() {
            return this.$store.state.teams
        },
        curTeam() {
            return this.$store.state.curTeam
        },
        token() {
            return this.$store.state.token
        }
    },
    methods: {
        toggleTeam(curVal) {
            const curTeam = this.teams.find(item => item.company_id === curVal)
            this.$store.commit('setCurTeam', curTeam)
            this.getOrder()
        },
        selectModule(name) {
            if (this.curModule === name) {
                return
            }
            this.curModule = name
            this.$router.push({ name })
        },
        init() {
            this.$store.dispatch('getTeams').then(data => {
                this.getOrder()
            })
        },
        getOrder() {
            this.$store.dispatch('getOrder', {
                page: '1'
            })
        },
        setError(err) {
            let info = err
            if (err) {
                let errObj = JSON.parse(err)
                info = errObj.msg
            }
            this.$message({
                type: 'error',
                message: info
            })
        }
    },
    created() {
        this.init()
        const { name } = this.$route
        if (name) {
            this.$router.push({ name })
            this.curModule = name
        } else {
            this.$router.push({ name: 'bizOrder' })
            this.curModule = 'bizOrder'
        }
        if (this.errInfo) {
            this.setError(this.errInfo)
        }
    },
    watch: {
        errInfo(val) {
            this.setError(val)
        }
    }
}
</script>
<style lang="less">
@import 'less/variables.less';
@import 'less/mixins.less';

@media print {
    @page {
        size: A4 landscape;
    }
    #app {
        .wrap {
            display: none;
        }
        .app-header {
            display: none;
        }
    }
}

.el-container {
    height: 100%;
}

// 头部
.app-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .el-select {
        position: absolute;
        top: 0;
        left: 10px;
        height: 100%;
        line-height: 60px;
    }

    .app-action {
        height: 100%;
        line-height: 60px;
        position: absolute;
        right: 20px;
    }

    .el-menu--horizontal > .el-menu-item {
        font-size: 18px;
    }
    .el-menu--horizontal > .el-menu-item.is-active {
        border-color: #ffc001;
        color: #ffc001;
    }
}

.el-button--success {
    background: #ffc001;
    border-color: #ffc001;
}

.el-button--info:hover,
.el-button--success:hover {
    background: #fff;
    border-color: #ffc001;
    color: #ffc001;
}

.el-button--info,
.el-button--danger {
    color: @text-color;
    border-color: #ddd;
    background-color: #fff;
}

.el-button--danger:focus,
.el-button--danger:hover {
    color: @red-1;
    border-color: @red-1;
    background-color: #fff;
}

.el-input.is-active .el-input__inner,
.el-input__inner:focus {
    border-color: #ddd;
}

.el-button--success.is-disabled,
.el-button--success.is-disabled:active,
.el-button--success.is-disabled:focus,
.el-button--success.is-disabled:hover,
.el-button--danger.is-disabled,
.el-button--danger.is-disabled:active,
.el-button--danger.is-disabled:focus,
.el-button--danger.is-disabled:hover {
    background-color: #ddd;
    border-color: #ddd;
}
</style>
